<template>
  <view class="dataStatistics">
    <view class="businessPart flex justify-between">
      <view class="flex align-center">
        <image
          class="tradeIcon"
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/tradeIcon.png"
          mode="scaleToFill"
        />
        <view class="statistics f-s-28">营业统计</view>
      </view>
      <view class="flex align-center">
        <view
          :class="item.active ? 'nowDate dateActive' : 'lastDate'"
          v-for="(item, id) in tabList"
          :key="id"
          @click="changeTab(item)"
          >{{ item.name }}</view
        >
        <!-- <view class="lastDate">昨日</view>
        <view class="nearDate">近七天</view> -->
      </view>
    </view>
    <view class="represent">
      <view class="flex justify-between">
        <!-- <view class="income fw-600 f-s-32">预计收入总额</view> -->
        <view class="income fw-600 f-s-32"></view>
        <view class="flex align-center" @click.stop="refresh"
          ><text>刷新</text>
          <image
            class="refreshData"
            src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/refreshData.png"
            mode="scaleToFill"
        /></view>
      </view>
      <!-- <view class="incomeNum mt-18 dinAlternate fw-600 f-s-32"
        >{{ incomeTotal }}
        <text class="unit">元</text>
      </view> -->
      <view class="collect flex">
        <view class="jobPart w-60">
          <view class="tit f-s-32">营业总额</view>
          <view class="total dinAlternate mt-18"
            >{{ businessSales }}
            <text class="totalUnit">元</text>
          </view>
          <view
            class="compare mt-18"
            :class="Number(businessSalesPercent) > 0 ? 'col-c2a' : ''"
          >
            <image
              class="topTriangle"
              v-if="Number(businessSalesPercent) > 0"
              src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/topTriangle.png"
              mode="scaleToFill"
            />较昨日 {{ businessSalesPercent }}%</view
          >
        </view>
        <view class="orderPart w-40">
          <view class="tit f-s-32">订单总数</view>
          <view class="total dinAlternate mt-18">{{ orderNum }} </view>
          <view class="flex align-center mt-18">
            <view class="compare">较昨日</view>
            <image
              class="topTriangle"
              v-if="Number(orderNumPercent) > 0"
              src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/topTriangle.png"
              mode="scaleToFill"
            />
            <text
              class="compare"
              :class="Number(orderNumPercent) > 0 ? 'col-c2a' : ''"
              >{{ orderNumPercent }}%</text
            >
          </view>
        </view>
      </view>
      <view class="collect flex">
        <view class="jobPart w-60">
          <view class="tit f-s-32">待释放积分</view>
          <view class="total dinAlternate mt-18">{{ toBeReleasedNum }} </view>
        </view>
        <view class="jobPart w-40">
          <view class="tit f-s-32">已释放抵用券</view>
          <view class="total dinAlternate mt-18">{{ releasedNum }}</view>
        </view>
      </view>
      <view class="collect flex">
        <view class="jobPart w-60">
          <view class="tit f-s-32">推广用户</view>
          <view class="total dinAlternate mt-18">{{ childrenNum }} </view>
        </view>
        <view class="jobPart w-40">
          <view class="tit f-s-32">销售奖励</view>
          <view class="total dinAlternate mt-18">{{ childrenRewardNum }}</view>
        </view>
      </view>
      <view class="foot"></view>
    </view>
  </view>
</template>
<script>
import {
  getTenantVoucherRecordById,
  getTenantChildrenInfoBySelf,
} from "@/api/user.js";
export default {
  props: {
    loginStatus: {
      type: Boolean,
      default: false,
    },
    merchantId: {
      type: Number || String,
      default: "",
    },
  },
  watch: {
    merchantId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.getMerchantRecordsData(newValue);
          this.getTenantInfoBySelf(newValue);
        }
      },
      // immediate: true,
    },
  },
  data() {
    return {
      businessRatio: "-1.00",
      orderRatio: "108.05",
      tabList: [
        {
          name: "今日",
          tab: 1,
          active: true,
        },
        {
          name: "昨日",
          tab: 2,
          active: false,
        },
        {
          name: "近七天",
          tab: 3,
          active: false,
        },
      ],
      businessSales: 0, // 营业总额
      incomeTotal: 0, // 收入总计
      orderNum: 0, // 订单总数
      releasedNum: 0, // 已释放抵用券
      toBeReleasedNum: 0, // 待释放积分
      searchType: 1,
      businessSalesPercent: 0, // 营业总额相较昨天比率
      orderNumPercent: 0, // 订单总数相较昨天比率
      childrenNum: 0, // 推广用户
      childrenRewardNum: 0, // 销售奖励
    };
  },
  mounted() {},
  methods: {
    // 商户支付流水
    getMerchantRecordsData() {
      // uni.showLoading({
      //   title: "加载中...",
      // });
      getTenantVoucherRecordById(this.searchType, this.merchantId)
        .then((res) => {
          // uni.hideLoading();
          if (Object.keys(res.data)) {
            let {
              businessSales,
              incomeTotal,
              orderNum,
              releasedNum,
              toBeReleasedNum,
              businessSalesPercent,
              orderNumPercent,
            } = res.data;
            this.businessSales = businessSales;
            this.incomeTotal = incomeTotal;
            this.orderNum = orderNum;
            this.releasedNum = releasedNum;
            this.toBeReleasedNum = toBeReleasedNum;
            this.businessSalesPercent = businessSalesPercent;
            this.orderNumPercent = orderNumPercent;
          }
        })
        .catch((err) => {
          // uni.hideLoading();
          uni.showToast({ title: err, icon: "none" });
        });
    },
    getTenantInfoBySelf() {
      getTenantChildrenInfoBySelf(this.merchantId)
        .then((res) => {
          if (Object.keys(res.data)) {
            let { childrenNum, childrenRewardNum } = res.data;
            this.childrenNum = childrenNum;
            this.childrenRewardNum = childrenRewardNum;
          }
        })
        .catch((err) => {
          // uni.showToast({ title: err, icon: "none" });
        });
    },
    refresh() {
      this.getMerchantRecordsData();
      this.getTenantInfoBySelf();
    },
    // 切换状态
    changeTab(data) {
      if (this.loginStatus) {
        this.tabList.forEach((item) => {
          if (item.name === data.name) {
            this.searchType = data.tab;
            item.active = true;
            this.getMerchantRecordsData();
          } else item.active = false;
        });
      } else {
        uni.showToast({ title: "请先登录", icon: "none" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.businessPart {
  padding: 18rpx 28rpx;
  border-bottom: 2rpx solid #f5f6f7;
  .tradeIcon {
    height: 63rpx;
    width: 63rpx;
  }
  .statistics {
    margin-left: 8rpx;
  }
}
.nowDate,
.lastDate {
  width: 98rpx;
  height: 46rpx;
  line-height: 46rpx;
  margin-left: 6rpx;
  text-align: center;
  font-size: 25rpx;
  color: #989898;
}
.dateActive {
  background: #ef4c2a;
  border-radius: 26rpx;
  color: #fff !important;
}
.represent {
  margin-top: 40rpx;
  padding: 18rpx 42rpx 18rpx 52rpx;
  .income {
    color: #424242;
  }
  .incomeNum {
    font-weight: bold;
    font-size: 67rpx;
    color: #000000;
  }
  .unit {
    font-size: 32rpx;
    color: #989898;
    margin-left: 14rpx;
  }
  .collect {
    margin-top: 42rpx;
  }
}
.topTriangle {
  margin: 0rpx 6rpx;
  width: 20rpx;
  height: 20rpx;
}
.totalUnit {
  margin-left: 8rpx;
  font-size: 25rpx;
  color: #989898;
}
.compare {
  font-size: 25rpx;
  color: #989898;
}
.total {
  font-weight: bold;
  font-size: 53rpx;
}
.col-c2a {
  color: #ef4c2a;
}
.mt-18 {
  margin-top: 18rpx;
}
.ml-200 {
  margin-left: 200rpx;
}
.foot {
  height: 30rpx;
}
.refreshData {
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}
.w-40 {
  width: 40% !important;
}
.w-60 {
  width: 60% !important;
}
</style>
